<template>
    <view class="wrapper">
        <!-- 商品图片 -->
        <swiper
            class="pics"
            indicator-dots
            indicator-color="rgba(255, 255, 255, 0.6)"
            indicator-active-color="#fff"
        >
            <swiper-item>
                <image
                    src="http://static.botue.com/ugo/uploads/detail_1.jpg"
                ></image>
            </swiper-item>
            <swiper-item>
                <image
                    src="http://static.botue.com/ugo/uploads/detail_2.jpg"
                ></image>
            </swiper-item>
            <swiper-item>
                <image
                    src="http://static.botue.com/ugo/uploads/detail_3.jpg"
                ></image>
            </swiper-item>
            <swiper-item>
                <image
                    src="http://static.botue.com/ugo/uploads/detail_4.jpg"
                ></image>
            </swiper-item>
            <swiper-item>
                <image
                    src="http://static.botue.com/ugo/uploads/detail_5.jpg"
                ></image>
            </swiper-item>
        </swiper>
        <!-- 基本信息 -->
        <view class="meta">
            <view class="price">￥199</view>
            <view class="name"
                >初语秋冬新款毛衣女 套头宽松针织衫简约插肩袖上衣</view
            >
            <view class="shipment">快递: 免运费</view>
            <text class="collect icon-star">收藏</text>
        </view>
        <!-- 商品详情 -->
        <view class="detail">
            <view v-html="goods.goods_introduce"></view>
            <!-- <rich-text></rich-text> -->
        </view>
        <!-- 操作 -->
        <view class="action">
            <button open-type="contact" class="icon-handset">联系客服</button>

            <!-- 添加数量显示-绝对定位 -->
            <text class="cart-count" v-if="carts.length">{{
                carts.length
            }}</text>

            <!-- 进入购物车 -->
            <text class="cart icon-cart" @click="goCart">购物车</text>

            <!-- 添加商品 -->
            <text @click="addCart" class="add">加入购物车</text>

            <text class="buy" @click="createOrder">立即购买</text>
        </view>
    </view>
</template>

<script>
export default {
    data() {
        return {
            goods: null,
            // 本地购物车数据
            carts: uni.getStorageSync("carts") || [],
        };
    },

    methods: {
        goCart() {
            uni.switchTab({
                url: "/pages/cart/index",
            });
        },

        createOrder() {
            uni.navigateTo({
                url: "/pages/order/index",
            });
        },

        async goGoods(goods_id) {
            const { meta: msg, message: data } = await this.request({
                url: "/api/public/v1/goods/detail",
                data: { goods_id },
            });

            console.log(msg, data);

            if (msg.status === 200) {
                this.goods = data;
            }
        },

        // 添加商品
        addCart() {
            // 判断是否添加过
            let good = this.carts.find(
                (item) => item.goods_id === this.goods.goods_id
            );

            // 没有=》新增
            if (!good) {
                const { goods_id, goods_name, goods_price, goods_small_logo } =
                    this.goods;
                // 没有， 加入新的
                this.carts.push({
                    goods_id,
                    goods_name,
                    goods_price,
                    goods_small_logo,
                    goods_count: 1,
                    // 默认选中
                    goods_checked: true,
                });
            } else {
                // 有=》数量加一
                good.goods_count++;
            }

            // 存储本地
            uni.setStorageSync("carts", this.carts);
            uni.showToast({
                title: "加入成功",
                duration: 2000,
            });
        },
    },

    onLoad(params) {
        console.log(params);
        this.goGoods(params.id);
    },
};
</script>

<style scoped lang="less">
.wrapper {
    margin-bottom: 100rpx;
    background-color: #f4f4f4;
}

.pics {
    height: 640rpx;
}

.meta {
    height: 250rpx;
    line-height: 1;
    padding: 30rpx 180rpx 30rpx 20rpx;
    box-sizing: border-box;
    background-color: #fff;
    position: relative;

    .price {
        font-size: 36rpx;
        color: #ea4451;
        margin-bottom: 20rpx;
    }

    .name {
        color: #333;
        line-height: 1.4;
        font-size: 33rpx;

        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        overflow: hidden;
    }

    .shipment {
        font-size: 27rpx;
        color: #999;
        position: absolute;
        bottom: 30rpx;
    }

    .collect {
        width: 140rpx;
        height: 88rpx;
        text-align: center;
        box-sizing: border-box;
        border-left: 1rpx solid #ddd;
        font-size: 24rpx;
        color: #999;

        position: absolute;
        right: 10rpx;
        top: 91rpx;
    }

    [class*="icon-"]::before {
        display: block;
        font-size: 45rpx;
        margin-bottom: 10rpx;
    }
}

.detail image {
    width: 100%;
    height: 480rpx;
    margin-top: 20rpx;
}

.action {
    width: 100%;
    height: 98rpx;
    background-color: #fff;

    position: fixed;
    left: 0;
    bottom: 0;

    display: flex;
    align-items: center;

    text {
        display: block;
    }

    .add,
    .buy {
        height: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        width: 210rpx;
        text-align: center;
        font-size: 27rpx;
        color: #fff;
    }

    .add {
        background-color: #f4b73f;
    }

    .buy {
        background-color: #ea4451;
    }

    button {
        padding: 0;
        border-radius: 0;
        background-color: #fff;

        &::after {
            border: none;
        }
    }

    button,
    .cart {
        flex: 1;
        text-align: center;
        color: #989898;
        font-size: 24rpx;
        box-sizing: border-box;
    }

    [class*="icon"]::before {
        display: block;
        font-size: 45rpx;
        margin-bottom: 2rpx;
    }
}
</style>
